<!--  -->
<template>
  <div>
    <van-form @submit="onSubmit">
      <div>
        <!-- <div class="pl10">
            <span class="font17">{{fromdata.title}}</span>
        </div> -->

        <div class="font15 mt10 pl10">
          <span class="titletext ">{{ (fromdata.titile) ? fromdata.title : '政策宣讲' }}</span>
          <div class="graytext  mt10 font13">
            <span>发起人：</span>
            <span class="titletext">{{ fromdata.applyUser }}</span>
          </div>

        </div>
        <div class="font11 mt10 bggray ptandpb10">
          <!-- <div class="graytext pl10">
                <span >发起人：</span>
                <span >{{fromdata.applyUser}}</span>
            </div> -->
          <div class=" graytext pl10">
            <span>发起人组织：</span>
            <span class="titletext">{{ fromdata.belongOrgName }}</span>
          </div>

        </div>

        <van-field readonly :right-icon="isdraw ? 'arrow' : ''" required input-align="left" label-width="8.5em"
          name="policyTypeName" :value="fromdata.policyTypeName" label="政策宣讲时限类型:" placeholder="请选择政策宣讲时限类型"
          @click="showPicker = isdraw ? true : false" :rules="[{ required: true, message: '' }]" />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>


        <!-- 周类别选择时间 -->
        <van-field v-show="fromdata.policyType == 1" required readonly :right-icon="isdraw ? 'arrow' : ''" input-align="left"
          label-width="8.5em" clickable name="policyStartTime" :value="fromdata.policyStartTime" label="政策宣讲开始时间:"
          placeholder="请选择开始时间" @click="showDayStrpick = isdraw ? true : false"
          :rules="[{ required: fromdata.policyType == 1, message: '' }]" />
        <van-popup v-model="showDayStrpick" position="bottom">
          <van-datetime-picker :formatter="formatter" v-model="nowDate" type="date" :min-date="strDate"
            :max-date="maxDate" @cancel="showDayStrpick = false" @confirm="showDayStrpickConfirm" />
        </van-popup>
        <van-field v-show="fromdata.policyType == 1" required readonly :right-icon="isdraw ? 'arrow' : ''" input-align="left"
          label-width="8.5em" clickable name="policyEndTime" :value="fromdata.policyEndTime" label="政策宣讲结束时间:"
          placeholder="请选择结束时间" @click="showDayEndpick = isdraw ? true : false"
          :rules="[{ required: fromdata.policyType == 1, message: '' }]" />
        <van-popup v-model="showDayEndpick" position="bottom">
          <van-datetime-picker :formatter="formatter" v-model="nowDate" type="date" :min-date="endDate"
            :max-date="maxDate" @cancel="showDayEndpick = false" @confirm="showDayEndpickConfirm" />
        </van-popup>
        <!-- 月度类别选择时间 -->
        <van-field v-show="fromdata.policyType == 2" required readonly :right-icon="isdraw ? 'arrow' : ''" input-align="left"
          label-width="6.5em" clickable name="year_month" :value="fromdata.year_month" label="政策宣讲时间:" placeholder="请选择时间"
          @click="showMonthStrpick = isdraw ? true : false" :rules="[{ required: fromdata.policyType == 2, message: '' }]" />
        <van-popup v-model="showMonthStrpick" position="bottom">
          <van-datetime-picker :formatter="formatter" v-model="nowDate" type="year-month" :min-date="strDate"
            :max-date="maxDate" @cancel="showMonthStrpick = false" @confirm="showMonthStrpickConfirm" />
        </van-popup>
        <!-- 季度类别选择时间 -->
        <van-field v-show="fromdata.policyType == 3" required readonly :right-icon="isdraw ? 'arrow' : ''" input-align="left"
          label-width="8.5em" clickable name="year" :value="fromdata.year" label="政策宣讲时间(年):" placeholder="请选择时间"
          @click="showJiduStrpick = isdraw ? true : false" :rules="[{ required: fromdata.policyType == 3, message: '' }]" />
        <van-popup v-model="showJiduStrpick" position="bottom">
          <van-datetime-picker :formatter="formatter" v-model="nowDate" type="year" :min-date="strDate"
            :max-date="maxDate" @cancel="showJiduStrpick = false" @confirm="showJiduStrpickConfirm" />
        </van-popup>
        <van-field v-show="fromdata.policyType == 3" required readonly :right-icon="isdraw ? 'arrow' : ''" input-align="left"
          label-width="8.5em" clickable name="quarterly" :value="fromdata.quarterly" label="政策宣讲时间(季):"
          placeholder="请选择时间" @click="showJiduEndpick = isdraw ? true : false"
          :rules="[{ required: fromdata.policyType == 3, message: '' }]" />
        <van-popup v-model="showJiduEndpick" position="bottom">
          <van-picker show-toolbar :columns="jiducolumns" @confirm="showJiduEndpickConfirm"
            @cancel="showJiduEndpick = false" />
        </van-popup>
        <!-- 年度选择时间 -->
        <van-field v-show="fromdata.policyType == 4" required readonly :right-icon="isdraw ? 'arrow' : ''" input-align="left"
          label-width="6.5em" clickable name="year" :value="fromdata.year" label="政策宣讲时间:" placeholder="请选择时间"
          @click="showYearPick = isdraw ? true : false" :rules="[{ required: fromdata.policyType == 4, message: '' }]" />
        <van-popup v-model="showYearPick" position="bottom">
          <van-datetime-picker :formatter="formatter" v-model="nowDate" type="year" :min-date="strDate"
            :max-date="maxDate" @cancel="showYearPick = false" @confirm="showYearPickConfirm" />
        </van-popup>
        <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
          <div class="blue_item"></div>
          <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">政策宣讲清单</span>
          <van-icon v-show="canEditFrom" style="line-height: 33px;color: #60a9ec;" color="#60a9ec" size="13px"
            name="plus" />
          <span v-show="canEditFrom" class="font13"
            style="display: flex; line-height: 33px;margin-left:5px;color: #60a9ec;margin-right:10px"
            @click="addFromdetail">新增</span>
        </div>
        <template>
          <el-table :data="fromdata.usPantchDetailList" stripe border fit :cell-class-name="cell" size="mini"
            style="width: 100%; " :key="reloadFrom">
            <el-table-column prop="numberCode" label="序号">
            </el-table-column>
            <el-table-column prop="lectureItems" label="宣讲事项" width="180">
            </el-table-column>
            <el-table-column prop="pantchTypeName" label="类型" width="100">
            </el-table-column>
            <!-- <el-table-column
        prop="type"
        label="支撑材料附件"
        width="100"
        >
      </el-table-column> -->
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button v-if="(fromdata.usPantchDetailList[scope.$index].pantchType == 1
                  || ((fromdata.usPantchDetailList[scope.$index].pantchType == 2) && !canEditFrom)) && !isdraw" size="mini"
                  @click="handleEdit(scope.$index, false)">查看</el-button>

                <el-button v-else-if="((fromdata.usPantchDetailList[scope.$index].pantchType == 2) && canEditFrom) || isdraw"
                  size="mini" @click="handleEdit(scope.$index, true)">编辑</el-button>
                <el-button v-if="((fromdata.usPantchDetailList[scope.$index].pantchType == 2) && canEditFrom) || isdraw"
                  size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div v-show="isshowpolicy || currentState">
          <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
            <div class="blue_item"></div>
            <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">政策宣讲反馈</span>
          </div>
          <!-- 反馈宣讲时间 -->
          <van-field v-show="isshowpolicy || currentState" required readonly :right-icon="ispolicy ? 'arrow' : ''"
            input-align="left" label-width="6.5em" clickable name="policyTime" :value="fromdata.policyTime"
            label="政策宣讲时间:" placeholder="请选择时间" @click="showpolicyTimePick = ispolicy ? true : false"
            :rules="[{ required: isshowpolicy, message: '' }]" />
          <van-popup v-model="showpolicyTimePick" position="bottom">
            <van-datetime-picker :formatter="formatter" v-model="nowDate" type="date" :min-date="oldDate"
              :max-date="maxDate" @cancel="showpolicyTimePick = false" @confirm="showpolicyTimePickConfirm" />
          </van-popup>
          <van-field v-show="isshowpolicy || currentState" rows="1" autosize type="textarea"
            v-model="fromdata.policyAddress" required label-width="4.5em" :readonly="!ispolicy"
            :right-icon="ispolicy ? 'arrow' : ''" label="宣讲地点:" placeholder="请填写宣讲地点"
            :rules="[{ required: isshowpolicy, message: '' }]" name="policyAddress" />
          <van-field v-show="isshowpolicy || currentState" rows="1" autosize type="textarea" v-model="fromdata.participants"
            required label-width="4.5em" :readonly="!ispolicy" :right-icon="ispolicy ? 'arrow' : ''" label="参与人员:"
            placeholder="请填写参与人员" :rules="[{ required: isshowpolicy, message: '' }]" name="participants" />
          <div class="border-b-1">
            <van-field label-width="10em" readonly name="content" label="宣讲反馈附件:" class="lyy-width" input-align="left"
              placeholder="">
            </van-field>
            <template>
              <template v-if="file_is_show">
                <div v-for="(item, index) in fromdata.feedBcakFile" :key="index" class="fileBox">
                  <div readonly class="font14 fileLink" style="color:#0F85CF">
                    <!-- <a :href="item.downLoadUrl.replace('/sys/file/download',
                                        'https://hfx.net/ha5giservice/hqwx/sys/file/download/anonymous')">{{item.fileName}}</a> -->
                    <a target="_blank" @click="openFileUrlfun(item.anonymousFilePath)">{{ item.fileName }}</a>
                    <!-- <a :href='openFileUrlfun(item.anonymousFilePath)'>{{item.fileName}}</a> -->
                  </div>
                  <span class="font12 color-red ml5" v-if='ispolicy' @click="uploadFileDelete(index)">X</span>
                </div>
              </template>

              <form v-if='ispolicy' action="" class="font14 file"
                style="height:46px;margin-bottom: 50px;text-align:right;padding-right:20px">
                <van-uploader v-model="fileList" :after-read="fileUpload" :preview-image='false'>
                  <van-button icon="plus" type="primary" color="#60a9ec">上传文件</van-button>
                </van-uploader>
              </form>
            </template>

          </div>

        </div>

        <div v-show="!isdraw && !istaizhang">
          <div class="spline"></div>
          <div style="padding-bottom: 42px">
            <div class="stitle font14">审批意见</div>
            <div v-if="approveList.length > 0" class="swrap" style="width: 100%">
              <div class="spiece_flex" v-for="(item, index) in approveList" :key="index">
                <div class="vertical-a-t display-ib" style="width: 25px">
                  <i v-if="index == 0" class="iconfont icon-current font16 color-red2"></i>
                  <i v-if="index > 0" class="iconfont icon-yiban font16 color-theme"></i>
                  <div v-if="index != (approveList.length - 1)" class="optionline"></div>
                </div>
                <div class="vertical-a-t display-ib" style="width: calc(100%)">
                  <div style="white-space: nowrap">
                    <span class="color-theme font14">{{ item.PRODUCERNAME || "暂无" }}：</span>
                    <span class="color-2 font14">{{
                      item.CONTENT || "暂无"
                    }}</span>
                  </div>
                  <div class="mt05 color-8" style="display: flex; align-items: baseline">
                    <div class="display-ib vertical-a-t font12" style="margin-top: 2px;width: 100%">
                      {{ item.ORGNAME || "暂无" }}
                    </div>
                    <div class="display-ib vertical-a-t font12 text-r"
                      style="margin-left: 10px; margin-top: 2px;text-align: right;width: 100%">
                      {{ item.MODIFIEDTIME || "暂无" }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div v-else>
              <div class="color-9 font12 text-c">暂无数据</div>
            </div>
          </div>
        </div>

      </div>

      <div v-show="todoType || isdraw" class="footer">
        <van-button block type="info" native-type="submit">流转下一步</van-button>
      </div>

    </van-form>
  </div>
</template>

<script>
import { getZcxjDetail, getZcxjFromListDetail, uploadProcessFiles, getZcxjOpinionDetail, deleteFromdata, getZcxjTaizhangDetail } from '@/api/gettodo'
import { Toast, Dialog, Notify } from 'vant'
import { mapGetters } from 'vuex'
import moment from 'moment'
import { openFileUrl } from '@/store/openFile'
export default {
  components: {

  },
  name: 'zcxjdetail',
  data() {
    return {
      isdraw: false,
      params: this.$route.query,
      fromdata: {},
      showPicker: false,
      approveList: [],
      todoType: false,
      columns: ['周', '月', '季度', '年'],
      jiducolumns: ['一季度', '二季度', '三季度', '四季度'],
      oldDate: new Date(new Date().getFullYear() - 10, new Date().getMonth(), new Date().getDate()),
      strDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
      endDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1),
      maxDate: new Date(new Date().getFullYear() + 60, new Date().getMonth(), new Date().getDate()),
      nowDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
      showDayStrpick: false,
      showDayEndpick: false,
      showMonthStrpick: false,
      showMonthEndpick: false,
      showJiduStrpick: false,
      showJiduEndpick: false,
      showYearPick: false,
      showpolicyTimePick: false,
      ispolicy: false,
      isshowpolicy: false,
      canEditFrom: false,
      webidCode: '',
      reloadFrom: '',
      taizhangId: '',
      istaizhang: '',
      currentState: false,
      file_is_show: true,
      fileList: []
    }
  },
  computed: {
    ...mapGetters(['user']),
    ...mapGetters(['userinfo']),
  },
  //生命周期--创建完成
  created() {
    this.getwebid();
    if (this.params.todoType == '1') {
      this.todoType = true;
    } else {
      this.todoType = false;
    }
    if (this.params.isdraw == '1') {
      this.isdraw = true;
    } else {
      this.isdraw = false;
    }
    // this.todoType=this.params.todoType;
    // this.isdraw = this.params.isdraw;
    if (this.isdraw) { //初始化起草时的参数
      this.fromdata.applyUser = this.userinfo.truename;
      this.fromdata.belongOrgName = this.userinfo.authOrgs[0].displayName;
      this.fromdata.id = "";
      this.fromdata.month = "";
      this.fromdata.pmInsId = "";
      this.fromdata.policyEndTime = "";
      this.fromdata.policyOutline = "";
      this.fromdata.policyStartTime = "";
      this.fromdata.quarterly = "";
      this.fromdata.webId = "";
      this.fromdata.workCode = "";
      this.fromdata.workItemId = "";
      this.fromdata.year = "";

      this.ispolicy = false;
      this.canEditFrom = true;
      this.fromdata.policyType = 1;
      this.istaizhang = false;
    } else if (this.params.taizhangId && this.params.istaizhang == '1') {
      this.istaizhang = true;
      // this.todoType=false;
      if (this.params.currentState == '7') {
        this.currentState = true;
      } else {
        this.currentState = false;
      }
      this.gettaizhangDetail();
    } else {
      this.istaizhang = false;
      if (this.params.location == 'djfupt.djAdminCheck') {
        this.isshowpolicy = true;
        this.canEditFrom = false;
        if (this.todoType) {
          this.ispolicy = true;
        } else {
          this.ispolicy = false;
        }
      } else {
        if (this.todoType) {
          this.canEditFrom = true;
        } else {
          this.canEditFrom = false;
        }
        this.isshowpolicy = false;
      }
      this.getDetail();
    }

  },
  activated() {
    console.log("activatedactivatedactivated");
    if (!this.istaizhang) {
      this.getfromList();
    }
  },
  //生命周期--挂载完成
  mounted() {

  },
  //方法调用
  methods: {
    openFileUrlfun(value) {
      this.$router.push(
        {
          name: 'fileview',
          query: {
            openFileUrl: openFileUrl(value)
          }
        }
      );
    },
    getDetail() {
      Toast.loading({
        message: "加载中...",
        forbidClick: false,
      });
      console.log('id是：' + this.params.id);
      getZcxjDetail(Object.assign(this.params, { userName: this.user.userName }))
        .then((result) => {
          Toast.clear();
          if (!result.data) {
            Notify(result.message);
            return;
          }
          this.fromdata = result.data.data;
          if (this.fromdata.policyType == 1) {
            this.fromdata.policyTypeName = '周';
          } else if (this.fromdata.policyType == 2) {
            this.fromdata.policyTypeName = '月';
          } else if (this.fromdata.policyType == 3) {
            this.fromdata.policyTypeName = '季度';
          } else if (this.fromdata.policyType == 4) {
            this.fromdata.policyTypeName = '年';
          }
          // if(!this.fromdata.policyTime){
          //   this.fromdata.policyTime=''; 
          // }
          // if(!this.fromdata.quarterly){
          //   this.fromdata.quarterly=''; 
          // }
          // if(!this.fromdata.policyStartTime){
          //   this.fromdata.policyStartTime=''; 
          // }
          // if(!this.fromdata.policyEndTime){
          //   this.fromdata.policyEndTime=''; 
          // }
          // if(!this.fromdata.year){
          //   this.fromdata.year=''; 
          // }
          // if(!this.fromdata.month){
          //   this.fromdata.month=''; 
          // }
          if (!this.fromdata.usPantchDetailList) {
            this.fromdata.usPantchDetailList = [];
          }
          this.fromdata.year_month = this.fromdata.year + this.fromdata.month;
          for (let i = 0; i < this.fromdata.usPantchDetailList.length; i++) {
            this.fromdata.usPantchDetailList[i].numberCode = i + 1;
            if (this.fromdata.usPantchDetailList[i].pantchType == 1) {
              this.fromdata.usPantchDetailList[i].pantchTypeName = '必选项';
            } else if (this.fromdata.usPantchDetailList[i].pantchType == 2) {
              this.fromdata.usPantchDetailList[i].pantchTypeName = '推荐项';
            }
          }
        }),
        this.getfromList();
      getZcxjOpinionDetail(Object.assign(this.params), { userName: this.user.userName })
        .then((result) => {
          if (!result.data) {
            Notify(result.message);
            return;
          }
          this.approveList = result.data.data.reverse();
        })

    },
    gettaizhangDetail() {
      getZcxjTaizhangDetail(Object.assign(this.params, { userName: this.user.userName }))
        .then((result) => {
          Toast.clear();
          if (!result.data) {
            Notify(result.message);
            return;
          }
          this.fromdata = result.data.data;
          if (this.fromdata.policyType == 1) {
            this.fromdata.policyTypeName = '周';
          } else if (this.fromdata.policyType == 2) {
            this.fromdata.policyTypeName = '月';
          } else if (this.fromdata.policyType == 3) {
            this.fromdata.policyTypeName = '季度';
          } else if (this.fromdata.policyType == 4) {
            this.fromdata.policyTypeName = '年';
          }
          this.fromdata.year_month = this.fromdata.year + this.fromdata.month;
          for (let i = 0; i < this.fromdata.usPantchDetailList.length; i++) {
            this.fromdata.usPantchDetailList[i].numberCode = i + 1;
            if (this.fromdata.usPantchDetailList[i].pantchType == 1) {
              this.fromdata.usPantchDetailList[i].pantchTypeName = '必选项';
            } else if (this.fromdata.usPantchDetailList[i].pantchType == 2) {
              this.fromdata.usPantchDetailList[i].pantchTypeName = '推荐项';
            }
          }
        })
    },
    getfromList() {//获取表格数据
      this.reloadFrom = '0';
      getZcxjFromListDetail(Object.assign(this.params, { userName: this.user.userName }
        , { webId: this.webidCode }))
        .then((result) => {
          if (!result.data) {
            Notify(result.message);
            return;
          }
          this.fromdata.usPantchDetailList = [];
          if (result.data.data.content && result.data.data.content.length > 0) {
            this.fromdata.usPantchDetailList = result.data.data.content;
            for (let i = 0; i < this.fromdata.usPantchDetailList.length; i++) {
              this.fromdata.usPantchDetailList[i].numberCode = i + 1;
              if (this.fromdata.usPantchDetailList[i].pantchType == 1) {
                this.fromdata.usPantchDetailList[i].pantchTypeName = '必选项';
              } else if (this.fromdata.usPantchDetailList[i].pantchType == 2) {
                this.fromdata.usPantchDetailList[i].pantchTypeName = '推荐项';
              }
            }
          }

          console.log('数组的数量是' + this.fromdata.usPantchDetailList.length)

          this.reloadFrom = this.fromdata.usPantchDetailList.length;
        })
    },
    addFromdetail() {
      this.$router.push({
        name: 'zcxjfromdetail',
        query: {
          isdrawFrom: true,
          webidCode: this.webidCode,
        }
      });
    },
    onConfirm(value) {
      this.fromdata.policyTypeName = value;
      if (value == "周") {
        this.fromdata.policyType = "1";
      } else if (value == "月") {
        this.fromdata.policyType = "2";
      } else if (value == "季度") {
        this.fromdata.policyType = "3";
      } else if (value == "年") {
        this.fromdata.policyType = "4";
      }
      this.showPicker = false;
    },
    handleEdit(index, canEdit) { //查看或者编辑
      //  console.log(index, canEdit);
      console.log(this.fromdata.usPantchDetailList[index].id, '#$@#$@#$@');
      this.$router.push({
        name: 'zcxjfromdetail',
        query: {
          isdrawFrom: false,
          webidCode: this.webidCode,
          canEdit: canEdit,
          fileId: this.fromdata.usPantchDetailList[index].id,
        }
      });
      // localStorage.setItem("canEdit", canEdit);
      // localStorage.setItem("fileId", this.fromdata.usPantchDetailList[index].id);


      // this.$router.push({
      //   name:'zcxjfromdetail',
      // });
    }, handleDelete(index) { //delete from data
      Dialog.confirm({
        title: '提示',
        message: '是否删除此条宣讲事项'
      })
        .then(() => {
          deleteFromdata(Object.assign({ fileId: this.fromdata.usPantchDetailList[index].id },
            { userName: this.user.userName }))
            .then((result) => {
              if (result.data.errcode == 0) {
                Notify({ type: 'success', message: '删除宣讲事项成功' })
                this.getfromList();
              } else {
                Notify(result.message)
              }

            })
        })
        .catch(() => {

        })

    }, onSubmit(values) {
      console.log('values' + JSON.stringify(values))
      this.fromdata.type = "C";
      this.$router.push(
        {
          name: 'zcxjtosubmit',
          params: {
            formData: this.fromdata,
            idcode: this.params
          }
        }
      );
    },
    cell({ row, column, rowIndex, columnIndex }) {
      // return 'line-height: 12px'
      return 'cell'
    },
    showDayStrpickConfirm(value) {
      this.fromdata.policyStartTime = moment(value).format('YYYY-MM-DD')
      this.endDate = new Date(value.getFullYear(), value.getMonth(), value.getDate() + 1)
      this.fromdata.policyEndTime = ''
      this.showDayStrpick = false;
    },
    showDayEndpickConfirm(value) {
      this.fromdata.policyEndTime = moment(value).format('YYYY-MM-DD')
      this.showDayEndpick = false;
    },
    showMonthStrpickConfirm(value) {
      this.fromdata.year = moment(value).format('YYYY') + '年';
      this.fromdata.month = moment(value).format('MM') + '月';
      this.fromdata.year_month = this.fromdata.year + this.fromdata.month;
      this.showMonthStrpick = false;
    },
    showJiduStrpickConfirm(value) {
      this.fromdata.year = moment(value).format('YYYY') + '年';
      this.showJiduStrpick = false;
    },
    showJiduEndpickConfirm(value) {
      this.fromdata.quarterly = value;
      this.showJiduEndpick = false;
    },
    showYearPickConfirm(value) {
      this.fromdata.year = moment(value).format('YYYY') + '年';
      this.showYearPick = false;
    },
    showpolicyTimePickConfirm(value) {
      this.fromdata.policyTime = moment(value).format('YYYY-MM-DD')
      this.showpolicyTimePick = false;
    }, getwebid() {
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length
      var webid = ''
      for (let i = 0; i < 16; i++) {
        webid += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      this.webidCode = webid;
    },
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      } else if (type === 'day') {
        return `${val}日`;
      } else if (type === 'hour') {
        return `${val}时`;
      } else if (type === 'minute') {
        return `${val}分`;
      }
      return val;
    },
    fileUpload(file, detail) {

      console.log('111' + JSON.stringify(file))
      let dataurl = file.content;
      let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      var filename = this.fileList[0].file.name;
      let fileData = new FormData();
      fileData.append('pmInsType', 'A');
      fileData.append('pmInsTypePart', '1');
      fileData.append('files', new File([u8arr], filename + "", {
        type: mime
      }));
      this.fileList = [];
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      uploadProcessFiles(fileData, Object.assign({ userName: this.user.userName }))
        .then(res => {
          Toast.clear();
          if (!res.data) {
            Notify(res.message);
            return;
          }
          this.file_is_show = false;
          if (this.fromdata != null && this.fromdata.feedBcakFile != null) {
            let listdetails = this.fromdata.feedBcakFile;
            listdetails = listdetails.concat(res.data.data.sysFiles);
            this.fromdata.feedBcakFile = listdetails;
            console.log(JSON.stringify(this.fromdata.feedBcakFile))
          } else {
            if (this.fromdata == null) {
              this.fromdata = {};
            }
            this.fromdata.feedBcakFile = [];
            this.fromdata.feedBcakFile = res.data.data.sysFiles;
          }
          this.file_is_show = true;
        })
        .catch(err => {
          Toast.clear();
          Notify('上传失败');
        })
      // drawFiles
    }, uploadFileDelete(index) {
      this.file_is_show = false;
      this.fromdata.feedBcakFile.remove(index);
      this.file_is_show = true;
    }
  }
}
</script>
<style  scoped>
/* @import url();*/
.mt10 {
  margin-top: 10px
}

.mt5 {
  margin-top: 5px
}

.bggray {
  background-color: whitesmoke;
}

.pl10 {
  padding-left: 10px;
}

.ptandpb10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.chosebox {
  width: 100px;
  display: inline;
}

.van-field__label {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  box-sizing: border-box;
  width: 6.2em;
  margin-right: 80px;
  color: #646566;
  text-align: left;
  word-wrap: break-word;

}

.van-cell__right-icon {
  height: 36px;
  font-size: 16px;
  line-height: 36px;
  margin-right: 6px;
}

.el-table .cell {

  line-height: 12px;

}
</style>